@import "./element-variables.scss";

/* 块级元素样式 */
.full-width {
    width: 100% !important;
}

.self-width {
    width: 50% !important;
}

.full-screen {
    width: 100% !important;
    height: 100% !important;
}

.fr {
    float: right;
}

.fl {
    float: left;
}

.clearfix {
    &:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
    }
}

@mixin inline($style) {
    display: inline-$style !important;
}

.block {
    display: block !important;
}

.flex {
    display: flex !important;
}

.inline-block {
    @include inline(block);
}

.inline-flex {
    @include inline(flex);
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

/* flex布局通用样式 */

.flex-start {
    justify-content: flex-start;
}

.flex-center {
    justify-content: center;
}

.flex-end {
    justify-content: flex-end;
}

.space-between {
    justify-content: space-between;
}

.space-around {
    justify-content: space-around;
}

.flex-wrap {
    flex-wrap: wrap;
}

.align-center {
    align-items: center;
}

/* font对齐方式 */
@mixin textAlign($align) {
    text-align: $align;
}

.text {
    &-left {
        @include textAlign(left);
    }

    &-center {
        @include textAlign(center);
    }

    &-right {
        @include textAlign(right);
    }

    &-brand {
        color: $--color-primary;
    }
    
    &-blue {
        color: #67B1FF;
    }
    
    &-gray {
        color:  #c9ccd3;
    }
    
    &-darkgray {
        color: #606266;
    }
    
    &-lightgray {
        color: #999999;
    }
    
    &-danger {
        color: #f56c6c;
    }
    
    &-ellipsis {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        &_2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        &_3 {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
    }
}

/* font 公用样式 */
.font {
    &-size {
        &--sm {
            font-size: 12px;
        }
    
        &--md {
            font-size: 14px;
        }
    
        &--xs {
            font-size: 16px;
        }
    
        &--lg {
            font-size: 18px;
        }
    }

    &-weight {
        &--sm {
            font-weight: 400;
        }
        
        &--md {
            font-weight: 800;
        }
        
        &--lg {
            font-weight: bolder;
        }
    }
}

.pointer {
    cursor: pointer;
}

/* background 公用样式 */
@mixin bgColor($color) {
    background-color: $color;
}

.bg-white {
    @include bgColor(rgba(255, 255, 255, 1));
}

/* no style or reset */
.no {
    &-margin {
        margin: 0 !important;
    }

    &-padding {
        padding: 0 !important;
    }

    &-border {
        border: 0 !important;
    }
}

/* padding or margin 盒模型样式 */
.padding {
    &_none {
        padding: 0 !important;
    }
    &_left {
        &_none {
            padding-left: 0 !important;
        }
        &_6 {
            padding-left: 6px;
        }
        &_8 {
            padding-left: 8px;
        }
        &_10 {
            padding-left: 10px;
        }
    }
    &_right {
        &_none {
            padding-right: 0 !important;
        }
        &_6 {
            padding-right: 6px;
        }
        &_8 {
            padding-right: 8px;
        }
        &_10 {
            padding-right: 10px;
        }
    }
    &_15 {
        padding: 15px;
    }
}

.margin {
    &_none {
        margin: 0 !important;
    }
    &_left {
        &_none {
            margin-left: 0 !important;
        }
        &_6 {
            margin-left: 6px;
        }
        &_8 {
            margin-left: 8px;
        }
        &_10 {
            margin-left: 10px;
        }
    }
    &_right {
        &_none {
            margin-right: 0 !important;
        }
        &_6 {
            margin-right: 6px;
        }
        &_8 {
            margin-right: 8px;
        }
        &_10 {
            margin-right: 10px;
        }
        &_20 {
            margin-right: 20px;
        }
    }
    &_top {
        &_none {
            margin-top: 0 !important;
        }
        &_10 {
            margin-top: 10px;
        }
        &_20 {
            margin-top: 20px;
        }
    }
    &_bottom {
        &_none {
            margin-bottom: 0 !important;
        }
        &_10 {
            margin-bottom: 10px;
        }
        &_20 {
            margin-bottom: 20px;
        }
    }
    &_5 {
        margin: 5px;
    }
    &_10 {
        margin: 10px;
    }
    &_15 {
        margin: 15px;
    }
}

.border {
    &_bottom {
        &_1 {
            border-bottom: 1px solid #eeeeee;
        }
    }
}

// my custom botton
button.my-btn {
    margin: 0;
    outline: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    @extend .pointer;
    color: #606266;
    background: #FFFFFF;
    border: 1px solid #DCDFE6;
    border-color: #DCDFE6;
    -webkit-appearance: none;
    text-align: center;
    transition: 0.1s;
    -webkit-transition: 0.1s;
    font-weight: 400;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;

    &.text {
        padding-left: 0;
        padding-right: 0;
        color: $--color-primary;
        border: 1px solid transparent;
        background-color: transparent;
        &:hover {
            color: initial;
            background-color: initial;
        }
    }

    &--medium {
        padding: 10px 20px;
        font-size: 14px;
        border-radius: 4px;
    }

    &--small {
        padding: 9px 15px;
        font-size: 12px;
        border-radius: 3px;
    }

    &--mini {
        padding: 7px 15px;
        font-size: 12px;
        border-radius: 3px;
    }

    &--primary {
        color: #ffffff;
        border: 1px solid $--color-primary;
        background-color: rgba($color: $--color-primary, $alpha: 1.0);

        &:hover {
            color: #ffffff;
            background-color: rgba($color: $--color-primary, $alpha: 0.85);
        }

        &.plain {
            color: $--color-primary;
            background-color: transparent;
            border: 1px solid $--color-primary;

            &:hover {
                color: #ffffff;
                background-color: rgba($color: $--color-primary, $alpha: 1.0);
            }
        }
    }

    &--danger {
        color: #ffffff;
        border: 1px solid $--color-danger;
        background-color: rgba($color: $--color-danger, $alpha: 1.0);

        &:hover {
            color: #ffffff;
            background-color: rgba($color: $--color-danger, $alpha: 0.85);
        }

        &.plain {
            color: $--color-danger;
            background-color: transparent;
            border: 1px solid $--color-danger;

            &:hover {
                color: #ffffff;
                background-color: rgba($color: $--color-danger, $alpha: 1.0);
            }
        }
    }

    & + & {
        margin-left: 10px;
    }
}

// dialogs
.el-dialog__header {
    padding: 15px !important;
    padding-bottom: 10px !important;
}

.el-dialog__body {
    padding: 10px 15px !important;
    max-height: 60vh;
    overflow-x: initial;
    overflow-y: auto;
}

.el-dialog__footer {
    padding: 15px !important;
    padding-top: 10px i !important;
}

.el-dialog__headerbtn {
    top: 18px !important;
}
